<template>
   <div class="index-accessory-center">
      <h1>智能配件</h1>
      <section-box-recomend-common v-if="recommend !== null"
                                   :recommend="recommend"
      >
      </section-box-recomend-common>
      <section-box-common v-if="list !== null"
                          :data-list="list"
                          :style-string="style"
      >
      </section-box-common>
   </div>
</template>

<script>
   import sectionBoxRecomendCommon from '../../components/section-box-recomend-common/section-box-recomend-common'
   import sectionBoxCommon from '../../components/section-box-common/section-box-common'
   export default {
      name: 'indexAccessoryCenter',
      data() {
         return {
            recommend: null,
            list: null,
            style: `width:230px; height:230px;`
         }
      },
      created() {
         this._initData()
      },
      methods: {
         async _initData() {
            let dataUrl = await this.$axios.get('/apis/home/index_accessory_center', {
               params: {
                  name: 'index_accessory_center'
               }
            })
            if (dataUrl.status === 200 && dataUrl.data.code === 1) {
               this.recommend = dataUrl.data.result.dataUrl[0]
               this.list = dataUrl.data.result.dataUrl[1]
            }
         }
      },
      components: {
         sectionBoxRecomendCommon,
         sectionBoxCommon
      }
   }
</script>

<style scoped lang="stylus">
   .index-accessory-center
      margin-top 40px
      h1
         font-size 30px
         font-weight 400
</style>
